<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" class="img-logo">
    <div class="title text-center txtover">{{cp}}: {{get_demo}}</div>
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <el-button @click="changeVuexHandle">Default</el-button>
    
    <!-- <Button type="success" @click="changeVuexHandle">vuex 按钮</Button> -->
  </div>
</template>

<script lang="ts" setup>
import {useStore} from 'vuex'
import { onMounted, ref, computed  } from 'vue';
import HelloWorld from '../components/HelloWorld.vue';
import { useCurrentInstance } from '../utils/hooks'

const {globalProperties} = useCurrentInstance()
const cp = ref<string>('我是首页')
const logo_W = ref<string>('100px')
const store = useStore()
const get_demo = computed(()=> store.getters.get_demo)

onMounted(() => {
  console.log(useStore())
  globalProperties.axios.post("/login").then((response:any) => {
    console.log(response, 'response')
  })
})

// const goAboutHandle = () => {
//   globalProperties.$router.push('/about')
// }

const changeVuexHandle = () => {
  store.commit('mutations_demo', 'commit')
  setTimeout(() => {
    store.dispatch('action_Demo', 'action22')
  }, 2000);
}
</script>
<style lang="less" scoped >
.title{
  font-size: 20px;
  transform: rotateX(10deg);
  
}
.img-logo{
  width: v-bind(logo_W)
}
</style>